<!--  -->
<template>
  <div id="app">
    <div class="tag clear">
      <span
        class="item fl"
        @click="toRouter('optional')"
        :class="{ cur: curNav == 'optional' }"
        >自选监控</span
      >
      <span
        class="item fl"
        @click="toRouter('history')"
        :class="{ cur: curNav == 'history' }"
        >历史监控</span
      >
      <span class="fr wx" @click="wxQr">微信提醒</span>
    </div>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>
<script>
import { CLIENT } from "@/common/const";
export default {
  data() {
    return {
      curNav: "optional",
      path:CLIENT,
    };
  },
  components: {},
  computed: {},
  watch: {
    $route(to, from) {
      if (this.curNav != to.name) {
        this.curNav = to.name;
      }
    },
  },
  mounted() {},
  methods: {
    toRouter(type) {
      const {
        name,
        params: { userId },
      } = this.$route;
      if (name == type) return;
      if (type == "history") {
        this.$router.push({
          path: `/history/101/${userId}`,
        });
      } else {
        this.$router.push({ name: type });
      }
      this.curNav = type;
    },
    wxQr() {
      // var path =
      //   "http://" +
      //   window.location.href.match(/^http(s)?:\/\/(.*?)(\/client)/)[2];
      window.prompt(
        "",
        `up://["open.web",${Date.now()},{"url":"${this.path}/webclient/weChatRemind/index.html#/qr?${Date.now()}","title":"微信提醒","popuptype":1}]`
      );
    },

    
  },
};
</script>
<style lang="scss" scoped>
#app {
  padding-top: 41px;
  .tag {
    height: 41px;
    background: #1c1d21;
    border: 1px solid #090910;
    padding: 1px 10px;
    line-height: 37px;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    .item {
      width: 115px;
      height: 35px;
      background: url($PIC_URL + "/tlbypcWeb/optional/btn_bg.png") no-repeat
        center;
      border-radius: 4px;
      margin-right: 10px;
      font-size: 15px;
      color: #ffffff;
      text-align: center;
      cursor: pointer;
      line-height: 35px;
      background-position: 0;
      &:hover {
        background-position: -115px 0;
      }
      &.cur {
        background-position: -230px 0;
      }
    }
    .wx {
      font-size: 16px;
      color: #36bd53;
      position: relative;
      cursor: pointer;
      &::before {
        content: "";
        display: block;
        position: absolute;
        width: 22px;
        height: 17px;
        background: url($PIC_URL + "/tlbypcWeb/optional/weixin.png") no-repeat
          center;
        left: -28px;
        top: 11px;
      }
    }
  }
}
</style>
